<template>
    <div>
        <div class="content">
            <div class="formBox">
                <h3>注册</h3>
                <div class="inputItem" style="margin-top: 20px">
                    <input type="text" placeholder="账号" v-model="username">
                </div>
                <div class="inputItem">
                    <input type="password" placeholder="填写新密码:6 - 16位密码，区分大小写" v-model="password" maxlength="16">
                </div>
                <div class="inputItem">
                    <input type="password" placeholder="确认密码" v-model="aginPassword">
                </div>
                <div>密保问题</div>
                <el-select v-model="value" placeholder="请选择" @change="change($event)">
                    <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value">
                    </el-option>
                </el-select>
                <div>密保答案</div>
                <div class="inputItem">
                    <input type="text" placeholder="请输入" v-model="secretAnswar">
                </div>
                <!-- <div class="inputItem_code">
                    <input type="text" placeholder="邮箱验证码" v-model="code">
                    <div>
                        <span class="code_line"></span>
                        <span class="code_text" @click="getCode" :class="[alreadyClick?'stopClick':'']">{{showText}}</span>
                    </div>
                </div> -->
                <div class="submit" @click="sumbit">提交注册</div>
                <div class="loginBox">
                    <span style="color: #777777;margin-right: 6px;">已有账户?</span>
                    <span class="loginText" @click="toLogin">登录</span>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
export default {
    components: {

    },
    data: function () {
        return {
            username: '',
            password: '',
            aginPassword: '',
            code: '',
            showText: '获取验证码',
            alreadyClick: false, //禁止连续点击
            codeTime: 0, //验证码倒计时
            isCode: false,
            options: [{
                value: '你最喜欢的宠物叫什么？',
                label: '你最喜欢的宠物叫什么？'
            }, {
                value: '你最喜欢的饮料叫什么？',
                label: '你最喜欢的饮料叫什么？'
            }, {
                value: '你最喜欢的食物是什么？',
                label: '你最喜欢的食物是什么？'
            }],
            secretQuestion: '',
            secretAnswar: '',
            value: '',
        }
    },
    methods: {
        sumbit() {
            if (this.youxiang == '') {
                this.$message.error('请输入邮箱');
            } else if (this.password == '') {
                this.$message.error('请输入密码');
            } else if (this.aginPassword == '') {
                this.$message.error('请输入密码');
            } else if (this.password != this.aginPassword) {
                this.$message.error('两次输入的密码不一致');
            } else if (this.secretQuestion == '') {
                this.$message.error('请输入密保信息');
            } else if (this.secretAnswar == '') {
                this.$message.error('请输入密保答案');
            } else {
                let params = {
                    userName: this.username,
                    password: this.password,
                    aginPassword: this.aginPassword,
                    secretQuestion: this.secretQuestion,
                    secretAnswar: this.secretAnswar,
                }
                this.$request.useradd(params).then(res => {
                    if (res.code == 200) {
                        this.$router.push('/login')
                    } else {
                        this.$message.error(res.msg);
                    }
                })
            }
        },
        getCode() {
            this.alreadyClick = true; //防止多次点击
            let i = 120; //初始秒数
            this.codeTime = i
            this.showText = i + 's';
            let timeBack = setInterval(() => {
                if (i != 0) {
                    i--;
                    this.codeTime = i;
                    this.showText = i + 's';
                } else {
                    this.codeTime = 0;
                    clearInterval(timeBack);
                    this.showText = '获取验证码';
                    this.alreadyClick = false;
                    if (this.nextPage) {
                        this.$message.error('验证码获取超时');
                    }
                }
            }, 1000);
            this.$message({
                message: '已发送',
                type: 'success'
            });
        },
        toLogin() {
            this.$router.push({
                path: '/login'
            }, () => { })
        },
        mouseStart() {
            this.isCode = true
        },
        mouseEnd() {
            this.isCode = false
        },
        change(e) {
            this.secretQuestion = e
        },
    }
}
</script>

<style scoped>
.content {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 180px;
}

.active_num {
    background: #ff8b1a;
}

.active_text {
    color: #ff8b1a;
}

.formBox {
    width: 390px;
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-top: 40px;
}

.inputItem,
.inputItem_code {
    margin-bottom: 18px;
    position: relative;
}

.inputItem input,
.inputItem_code {
    width: 293px;
    height: 42px;
    border-radius: 2px;
    opacity: 1;
    border: 1px solid rgba(221, 221, 221, 1);
    background: rgba(242, 247, 244, 1);
    padding-left: 12px;
    outline: none;
}

.inputItem_code {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.inputItem_code input {
    outline: none;
    width: 150px;
    height: 40px;
    border: none;
    background: rgba(242, 247, 244, 1);
}

.codeImg {
    width: 24px;
    height: 24px;
    position: absolute;
    top: 12px;
    right: 12px;
    cursor: pointer;
    /* 变成手 */
}

.codeText {
    color: rgba(119, 119, 119, 1);
    font-size: 13px;
    font-weight: 400;
    margin-top: 2px;
}

.submit {
    width: 293px;
    height: 42px;
    border-radius: 2px;
    opacity: 1;
    background: #ff8b1a;
    color: rgba(255, 255, 255, 1);
    font-size: 14px;
    font-weight: 500;
    text-align: center;
    line-height: 42px;
    cursor: pointer;
    /* 变成手 */
}

.loginBox {
    font-size: 14px;
    font-weight: 400;
    margin-top: 12px;
    display: flex;
}

.loginText {
    text-decoration: underline;
    color: #ff8b1a;
    cursor: pointer;
}

.code_line {
    width: 14px;
    height: 0;
    opacity: 1;
    border: 1px solid rgba(221, 221, 221, 1);
}

.code_text {
    color: #ff8b1a;
    font-size: 14px;
    margin: 0 12px;
    cursor: pointer;
    /* 变成手 */
    user-select: none;
    /* 点击文字不变成I */
}

.stopClick {
    pointer-events: none;
}

.codeImageBox {
    position: absolute;
    top: 50%;
    right: -124px;
    transform: translateY(-55%);
    width: 110px;
    height: 110px;
    opacity: 1;
    background-color: rgba(216, 216, 216, 0.3);
    /* border: 1px solid #DDDDDD; */
    display: flex;
    align-items: center;
    justify-content: center;
}

.sanjiao {
    width: 0;
    height: 0;
    border-top: 10px solid transparent;
    border-bottom: 10px solid transparent;
    border-left: 10px solid transparent;
    border-right: 10px solid rgba(216, 216, 216, 0.3);
    position: absolute;
    top: 50%;
    left: -20px;
    transform: translateY(-50%);
}
</style>